<template>
  <div class="chatAnalysis">
    <el-card shadow="hover">
      <!-- 闪电会话总览 -->
      <div class="searchBox1">
        <div>
          <h4>闪电会话总览</h4>
        </div>
        <div>
          <el-radio-group
            v-model="flashType"
            size="medium"
            fill="#39383D"
            @change="getFlashData"
          >
            <el-radio-button label="1">今日</el-radio-button>
            <el-radio-button label="2">总计</el-radio-button>
          </el-radio-group>
        </div>
      </div>
      <div class="userStatisticsItem">
        <el-card class="one">
          <h4>闪电会话人数</h4>
          <div>
            <span class="numSpan">{{ personNumber }}</span>
            <el-divider></el-divider>
            <span>{{ time }}</span>
          </div>
        </el-card>
        <el-card class="one">
          <h4>闪电会话次数</h4>
          <div>
            <span class="numSpan">{{ sessionsNumber }}</span>
            <el-divider></el-divider>
            <span>{{ time }}</span>
          </div>
        </el-card>
        <el-card class="one">
          <h4>时间重置人数</h4>
          <div>
            <span class="numSpan">{{ resetNumber }}</span>
            <el-divider></el-divider>
            <span>{{ time }}</span>
          </div>
        </el-card>
        <el-card class="one">
          <h4>时间重置次数</h4>
          <div>
            <span class="numSpan">{{ resetTime }}</span>
            <el-divider></el-divider>
            <span>{{ time }}</span>
          </div>
        </el-card>
      </div>
      <div class="userStatisticsItem">
        <el-card class="one">
          <h4>强制吸引使用人数</h4>
          <div>
            <span class="numSpan">{{ attractPerson }}</span>
            <el-divider></el-divider>
            <span>{{ time }}</span>
          </div>
        </el-card>
        <el-card class="one">
          <h4>强制吸引使用数</h4>
          <div>
            <span class="numSpan">{{ attractUse }}</span>
            <el-divider></el-divider>
            <span>{{ time }}</span>
          </div>
        </el-card>
        <el-card class="one">
          <h4>强制吸引成功数</h4>
          <div>
            <span class="numSpan">{{ attractSuccess }}</span>
            <el-divider></el-divider>
            <span>{{ time }}</span>
          </div>
        </el-card>
        <el-card class="one">
          <h4>强制吸引成功率</h4>
          <div>
            <span class="numSpan">{{ attractRate }}</span>
            <el-divider></el-divider>
            <span>{{ time }}</span>
          </div>
        </el-card>
      </div>

      <!-- 闪电会话分析表 -->
      <div class="searchBox">
        <div>
          <h3>闪电会话分析表</h3>
        </div>
        <div>
          <el-date-picker
            v-model="lightningTimeVal"
            type="daterange"
            align="right"
            unlink-panels
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :picker-options="lightningPickerOptions"
            value-format="yyyy-MM-dd"
            @change="focus"
          >
          </el-date-picker>
          <el-button class="btn" icon="el-icon-search" @click="lightningBtn"
            >查询搜索</el-button
          >
          <el-button class="btn" icon="el-icon-download" @click="exportExcelA"
            >导出Excel</el-button
          >
        </div>
      </div>
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="date" label="日期"> </el-table-column>
        <el-table-column prop="personNumber" label="闪电会话人数">
        </el-table-column>
        <el-table-column prop="sessionNumber" label="闪电会话次数">
        </el-table-column>
        <el-table-column prop="resetPerson" label="时间重置人数">
        </el-table-column>
        <el-table-column prop="resetNumber" label="时间重置次数">
        </el-table-column>
        <el-table-column prop="useTimesNum" label="强制吸引使用数">
        </el-table-column>
        <el-table-column prop="useNumber" label="强制吸引使用人数">
        </el-table-column>
        <el-table-column prop="reUseNumber" label="强制吸引重复使用数">
        </el-table-column>
        <el-table-column prop="successNumber" label="强制吸引成功数">
        </el-table-column>
      </el-table>
      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="page"
        :limit.sync="pageSize"
        @pagination="getFlashList"
      />
    </el-card>

    <!-- 私聊总览 -->
    <el-card shadow="hover" class="privateChat">
      <!-- 私聊总览 -->
      <div class="searchBox1">
        <div>
          <h4>私聊总览</h4>
        </div>
        <div>
          <el-radio-group
            v-model="privateType"
            size="medium"
            fill="#39383D"
            @change="getPrivateData"
          >
            <el-radio-button label="1">今日</el-radio-button>
            <el-radio-button label="2">总计</el-radio-button>
          </el-radio-group>
        </div>
      </div>
      <div class="userStatisticsItem">
        <el-card class="one">
          <h4>私聊人数</h4>
          <div>
            <span class="numSpan">{{ personNumber1 }}</span>
            <el-divider></el-divider>
            <span>{{ timeB }}</span>
          </div>
        </el-card>
        <el-card class="one">
          <h4>私聊发起次数</h4>
          <div>
            <span class="numSpan">{{ initiateNumber }}</span>
            <el-divider></el-divider>
            <span>{{ timeB }}</span>
          </div>
        </el-card>
        <el-card class="one">
          <h4>首次私聊人数</h4>
          <div>
            <span class="numSpan">{{ fristNumber }}</span>
            <el-divider></el-divider>
            <span>{{ timeB }}</span>
          </div>
        </el-card>
        <el-card class="one">
          <h4>首次私聊率</h4>
          <div>
            <span class="numSpan">{{ fristRate }}</span>
            <el-divider></el-divider>
            <span>{{ timeB }}</span>
          </div>
        </el-card>
      </div>
      <div class="userStatisticsItem">
        <el-card class="one">
          <h4>发送邀请次数</h4>
          <div>
            <span class="numSpan">{{ invitationNumber }}</span>
            <el-divider></el-divider>
            <span>{{ timeB }}</span>
          </div>
        </el-card>
        <el-card class="one">
          <h4>发送邀请率</h4>
          <div>
            <span class="numSpan">{{ invitationRate }}</span>
            <el-divider></el-divider>
            <span>{{ timeB }}</span>
          </div>
        </el-card>
        <el-card class="one">
          <h4>接受邀请次数</h4>
          <div>
            <span class="numSpan">{{ invitedNumber }}</span>
            <el-divider></el-divider>
            <span>{{ timeB }}</span>
          </div>
        </el-card>
        <el-card class="one">
          <h4>接受邀请率</h4>
          <div>
            <span class="numSpan">{{ invitedRate }}</span>
            <el-divider></el-divider>
            <span>{{ timeB }}</span>
          </div>
        </el-card>
      </div>

      <!-- 私聊分析表 -->
      <div class="searchBox">
        <div>
          <h3>私聊分析表</h3>
        </div>
        <div>
          <el-date-picker
            v-model="privateChatTimeVal"
            type="daterange"
            align="right"
            unlink-panels
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :picker-options="privateChatPickerOptions"
            value-format="yyyy-MM-dd"
            @change="focusB"
          >
          </el-date-picker>
          <el-button class="btn" icon="el-icon-search" @click="privateChatBtn"
            >查询搜索</el-button
          >
          <el-button class="btn" icon="el-icon-download" @click="exportExcelB"
            >导出Excel</el-button
          >
        </div>
      </div>
      <el-table :data="privateChatTableData" style="width: 100%">
        <el-table-column prop="date" label="日期"> </el-table-column>
        <el-table-column prop="personNumber" label="私聊人数">
        </el-table-column>
        <el-table-column prop="fristNumber" label="首次匹配私聊次数">
        </el-table-column>
        <el-table-column prop="invitationNumber" label="发送邀请次数">
        </el-table-column>
        <el-table-column prop="invitationRate" label="发送邀请率">
        </el-table-column>
        <el-table-column prop="invitedNumber" label="接受邀请次数">
        </el-table-column>
        <el-table-column prop="invitedRate" label="接受邀请率">
        </el-table-column>
      </el-table>
      <pagination
        v-show="totalB > 0"
        :total="totalB"
        :page.sync="pageB"
        :limit.sync="pageSizeB"
        @pagination="getPrivateList"
      />
    </el-card>
  </div>
</template>

<script>
import Pagination from "@/components/Pagination"; // 分页
import {
  flashChatAll,
  flashChatList,
  privateChatAll,
  privateChatList,
} from "@/api/DataAnalysis";
export default {
  components: { Pagination },
  inject: ["reload"],
  data() {
    return {
      flashType: "1",
      privateType: "1",
      //闪电会话时间
      personNumber: "",
      sessionsNumber: "",
      resetNumber: "",
      resetTime: "",
      attractPerson: "",
      attractUse: "",
      attractSuccess: "",
      attractRate: "",
      time: "",
      lightningPickerOptions: {
        disabledDate(platformValue) {
          return platformValue.getTime() > Date.now() - 8.64e6;
        },
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 6);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      lightningTimeValStartDate: "",
      lightningTimeValEndDate: "",
      lightningTimeVal: "", //渠道增长时间
      tableData: [],
      total: 0,
      page: 1, //页码
      pageSize: 10, //每页条数
      //私聊总览
      personNumber1: "",
      initiateNumber: "",
      fristNumber: "",
      fristRate: "",
      invitationNumber: "",
      invitationRate: "",
      invitedNumber: "",
      invitedRate: "",
      timeB: "",
      //私聊分析表
      //私聊分析表时间
      privateChatPickerOptions: {
        disabledDate(platformValue) {
          return platformValue.getTime() > Date.now() - 8.64e6;
        },
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 6);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      privateChatTimeValStartDate: "",
      privateChatTimeValEndDate: "",
      privateChatTimeVal: "", //私聊分析表时间
      privateChatTableData: [],
      totalB: 0,
      pageB: 1, //页码
      pageSizeB: 10, //每页条数
    };
  },
  methods: {
    //闪电会话查询搜索
    lightningBtn() {
      this.page = 1;
      this.getFlashList();
    },
    //闪电会话分页
    getList() {},
    //时间闪电会话
    focus(time) {
      if (!this.lightningTimeVal) {
        this.lightningTimeVal = [];
      }
      this.lightningTimeValStartDate = this.lightningTimeVal[0];
      this.lightningTimeValEndDate = this.lightningTimeVal[1];
    },

    //私聊列表查询搜索
    privateChatBtn() {
      this.pageB = 1;
      this.getPrivateList();
    },
    //私聊列表时间
    focusB(time) {
      if (!this.privateChatTimeVal) {
        this.privateChatTimeVal = [];
      }
      this.privateChatTimeValStartDate = this.privateChatTimeVal[0];
      this.privateChatTimeValEndDate = this.privateChatTimeVal[1];
    },
    //获取闪电数据
    getFlashData() {
      flashChatAll({ type: this.flashType }).then((res) => {
        if (res.code == 0) {
          this.personNumber = res.data.personNumber;
          this.sessionsNumber = res.data.sessionsNumber;
          this.resetNumber = res.data.resetNumber;
          this.resetTime = res.data.resetTime;
          this.attractPerson = res.data.attractPerson;
          this.attractUse = res.data.attractUse;
          this.attractSuccess = res.data.attractSuccess;
          this.attractRate = res.data.attractRate;
          this.time = res.data.time;
        }
      });
    },
    //获取闪电会话分析表
    getFlashList() {
      flashChatList({
        startTime: this.lightningTimeValStartDate,
        endTime: this.lightningTimeValEndDate,
        page: this.page,
        pageSize: this.pageSize,
      }).then((res) => {
        if (res.code == 0) {
          this.tableData = res.data.list;
          this.total = res.data.total;
        }
      });
    },
    //获取私聊数据
    getPrivateData() {
      privateChatAll({ type: this.privateType }).then((res) => {
        if (res.code == 0) {
          this.personNumber1 = res.data.personNumber;
          this.initiateNumber = res.data.initiateNumber;
          this.fristNumber = res.data.fristNumber;
          this.fristRate = res.data.fristRate;
          this.invitationNumber = res.data.invitationNumber;
          this.invitationRate = res.data.invitationRate;
          this.invitedNumber = res.data.invitedNumber;
          this.invitedRate = res.data.invitedRate;
          this.timeB = res.data.time;
        }
      });
    },
    //获取私聊表
    getPrivateList() {
      privateChatList({
        startTime: this.privateChatTimeValStartDate,
        endTime: this.privateChatTimeValEndDate,
        page: this.pageB,
        pageSize: this.pageSizeB,
      }).then((res) => {
        if (res.code == 0) {
          this.privateChatTableData = res.data.list;
          this.totalB = res.data.total;
        }
      });
    },
    //excel
    // excel() {
    //   import("@/excel/Export2Excel").then((excel) => {
    // const tHeader = [
    //   "日期",
    //   "闪电会话人数",
    //   "闪电会话次数",
    //   "时间重置人数",
    //   "时间重置次数",
    //   "强制吸引使用人数",
    //   "强制吸引重复使用数",
    //   "强制吸引成功数",
    // ];
    //     const data = this.tableData;
    //     excel.export_json_to_excel({
    //       header: tHeader, //表头 必填
    //       data, //具体数据 必填
    //       filename: "excel-list", //非必填
    //       autoWidth: true, //非必填
    //       bookType: "xlsx", //非必填
    //     });
    //   });
    // },
    async exportExcelA() {
      if (!this.lightningTimeValStartDate || !this.lightningTimeValEndDate) {
        this.$message({
          type: "error",
          message: "请选择时间范围",
        });
        return;
      }
      const res = await flashChatList({
        startTime: this.lightningTimeValStartDate,
        endTime: this.lightningTimeValEndDate,
        page: 1,
        pageSize: 1000,
      });

      require.ensure([], () => {
        const { export_json_to_excel } = require("@/excel/Export2Excel"); //注意这个Export2Excel路径
        const tHeader = [
          "日期",
          "闪电会话人数",
          "闪电会话次数",
          "时间重置人数",
          "时间重置次数",
          "强制吸引使用数",
          "强制吸引使用人数",
          "强制吸引重复使用数",
          "强制吸引成功数",
        ]; // 上面设置Excel的表格第一行的标题
        const filterVal = [
          "date",
          "personNumber",
          "sessionNumber",
          "resetPerson",
          "resetNumber",
          "useTimesNum",
          "useNumber",
          "reUseNumber",
          "successNumber",
        ]; // 上面的index、nickName、name是tableData里对象的属性key值
        const list = res.data.list; //把要导出的数据tableData存到list
        const data = this.formatJson(filterVal, list);
        console.log(data);
        export_json_to_excel(tHeader, data, "闪电会话分析"); //最后一个是表名字
      });
    },
    async exportExcelB() {
      if (
        !this.privateChatTimeValStartDate ||
        !this.privateChatTimeValEndDate
      ) {
        this.$message({
          type: "error",
          message: "请选择时间范围",
        });
        return;
      }
      const res = await privateChatList({
        startTime: this.privateChatTimeValStartDate,
        endTime: this.privateChatTimeValEndDate,
        page: 1,
        pageSize: 1000,
      });
      require.ensure([], () => {
        const { export_json_to_excel } = require("@/excel/Export2Excel"); //注意这个Export2Excel路径
        const tHeader = [
          "日期",
          "私聊人数",
          "首次匹配私聊次数",
          "发送邀请次数",
          "发送邀请率",
          "接受邀请次数",
          "接受邀请率",
        ]; // 上面设置Excel的表格第一行的标题
        const filterVal = [
          "date",
          "personNumber",
          "fristNumber",
          "invitationNumber",
          "invitationRate",
          "invitedNumber",
          "invitedRate",
        ]; // 上面的index、nickName、name是tableData里对象的属性key值
        const list = res.data.list; //把要导出的数据tableData存到list
        const data = this.formatJson(filterVal, list);
        export_json_to_excel(tHeader, data, "私聊分析"); //最后一个是表名字
      });
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map((v) => filterVal.map((j) => v[j]));
    },
  },
  created() {
    this.getFlashData();
    this.getFlashList();
    this.getPrivateData();
    this.getPrivateList();
  },
};
</script>

<style lang="less" scoped>
.chatAnalysis {
  margin: 30px;
  height: 100%;
  .privateChat {
    margin-top: 60px;
  }
  .userStatisticsItem {
    margin-top: 20px;
    display: flex;
    justify-content: space-between;
    margin-bottom: 40px;
    .el-divider--horizontal {
      margin: 10px 0px;
    }
    .one {
      width: 300px;
      height: 100%;
      h4 {
        margin: 0px;
        font-size: 20px;
        margin-bottom: 10px;
      }
      .numSpan {
        font-size: 26px;
      }
    }
  }
  .searchBox {
    display: flex;
    justify-content: space-between;
    margin-top: 80px;
  }
  .searchBox1 {
    display: flex;
    justify-content: space-between;
    h4 {
      margin: 0px;
      font-size: 20px;
      margin-bottom: 10px;
    }
  }
  .el-table {
    margin-top: 20px;
  }
}
</style>